<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>个人中心</title>
    <!-- zui -->
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/zui.min.css">
    <link rel="stylesheet" type="text/css" href="css/doc.min.css">
    <style type="text/css">
    	body{background: #f3f3f3}
    	header{background: #ef673c;color: #fff}
    	h2{margin: 0;padding: .5em 0;}
    	.icon-arrow-left{font-size: inherit;}
    	.row{background: #fff}
    	.height{height: 3em;line-height: 3em}
    	.bottom{margin-bottom: 1em}
    	.border{border-bottom: 1px solid #ccc}
    	.head{width: 45%;border-radius: 50%;border:4px solid #f3f3f3;}
    	.my-icon{height: 100%}
    	.my-icon span{display: block;padding-left: 2em;}
    	.micon-head{background: url(images/icon-head.png) no-repeat left center;background-size: 1.3em}
    	.micon-name{background: url(images/icon-name.png) no-repeat left center;background-size: 1.3em}
    	.micon-sex{background: url(images/icon-sex.png) no-repeat left center;background-size: 1.3em}
    	.micon-age{background: url(images/icon-age.png) no-repeat left center;background-size: 1.3em}
    	.micon-follow{background: url(images/icon-follow.png) no-repeat left center;background-size: 1.3em}
    	footer{position: fixed;bottom: 4%;left: 0;width: 100%}
    	.btn{border:0 none;border-radius: 0;text-shadow: none;background: #ef673c;color:#fff;}
    	.btn:focus,.btn:active{border:0;box-shadow: none;background: #ef673c;color: #fff;}
    </style>
</head>
<body class="hidden-md hidden-lg">
	<div class="wrapper" id="wrapper">
		<header class="clearfix">
			<div class="col-xs-2">
				<h2><i class="icon icon-arrow-left"></i></h2>
			</div>
			<div class="col-xs-8 text-center"><h2>个人中心</h2></div>
		</header>
		<div class="container">
			<div class="row bottom" style="padding:.4em 0;margin-top:1em">
				<div class="col-xs-6 my-icon">
					<span class="micon-head">头像</span>
				</div>
				<div class="col-xs-6 text-right">
					<img class="head" src="images/head.png">
				</div>
			</div>
			<div class="row height border" date-src="personal-choice/nickname.html">
				<div class="col-xs-6 my-icon">
					<span class="micon-name">昵称</span>
				</div>
				<div class="col-xs-6 text-right">
					<span id="nickname">张三</span>
				</div>
			</div>
			<div class="row height border" date-src="personal-choice/sex.html">
				<div class="col-xs-6 my-icon">
					<span class="micon-sex">性别</span>
				</div>
				<div class="col-xs-6 text-right">
					<span id="sex">张三</span>
				</div>
			</div>
			<div class="row height bottom" date-src="personal-choice/age.html">
				<div class="col-xs-6 my-icon">
					<span class="micon-age">年龄</span>
				</div>
				<div class="col-xs-6 text-right">
					<span id="age">张三</span>
				</div>
			</div>
			<div class="row height" date-src="personal-choice/follow.html">
				<div class="col-xs-4 my-icon">
					<span class="micon-follow">关注</span>
				</div>
				<div class="col-xs-8 text-right">
					<span id="follow">张三</span>
				</div>
			</div>
		</div>
	</div>
	<iframe src="" frameborder="0" style="position:absolute;top:0;left:0;width:100%;height:100%;display:none"></iframe>
	<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
	<script type="text/javascript">
		$('.head').css('height',$('.head').width()+8+'px');
		$('.head').parents('.row').css('line-height',$('.head').parent().height()+'px');

		(function(){
			$('.height').each(function(){
				$(this).click(function(){
					$('iframe').attr('src',$(this).attr('date-src')).show();
					$('.wrapper').hide();
				})
			})
		})();
	</script>
</body>
</html>